<template>
  <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab" @tab-click="tabClick">
    <el-tab-pane
      v-for="item in editableTabs"
      :key="item.name"
      :label="item.name"
      :name="item.route"
    >
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  props: {
    editableTabs: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  components: {},
  data () {
    return {
      editableTabsValue: '1'
    }
  },
  computed: {
    activeIndex: {
      get () {
        return this.$store.state.activeIndex
      },
      set (val) {
        this.$store.dispatch('setAction', val)
      }
    }
  },
  watch: {
    '$store.state.activeIndex': {
      handler (value) {
        this.editableTabsValue = value
      },
      deep: true,
      immediate: true
    }
  },
  mounted () {
  },
  methods: {
    tabClick (tab) {
      console.log(tab)
      this.$emit('changeMenu', tab.name)
    },
    removeTab (targetName) {
      this.$store.dispatch('deleteAction', targetName)
      let route = localStorage.getItem('activeIndex')
      if (targetName === route) {
        this.$emit('closeTab', route)
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
